<#include "/common/head.html"/>
<div id="cc" class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'west',split:true,border:false" style="width:20%;">
    	<div class="easyui-panel" title="站点工序树" data-options="fit:true,border:false">
	       <ul id="tt" class="easyui-tree"></ul>
	       <!-- 	<ul id="tt" class="easyui-tree"
				data-options="				
					animate: true,
					onContextMenu: function(e,node){
						e.preventDefault();
						$(this).tree('select',node.target);
						$('#mm').menu('show',{
							left: e.pageX,
							top: e.pageY
						});
					}
				"></ul> -->
    	</div>    	
    </div>
    <div data-options="region:'center',border:false">
   		<div id="headtitle" class="easyui-panel" style="color:red;background-color: #eee;line-height: 25px">工序清单如下：</div>		    	
    	<div class="easyui-layout" fit="true">
	    	<div data-options="region:'north',border:false" style="height:60%;width:100%">	    		
		    	<div id="dg"></div>
	    	</div>
	    	<div data-options="region:'center',border:false" style="height:37%;width:100%">		    	
			    <div class="easyui-tabs" data-options="border:true" style="height:92%;width:100%">
					<div title="人员管理">
						<iframe id="personframe" src="" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>
					</div>
					<div title="机具管理" closable="false">
						<iframe id="equipframe" src="" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>
					</div>
					<div title="材料管理" closable="false">
						<iframe id="materialframe" src="" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>
					</div>
					<div title="视频信号" closable="false">
						<img id="videoframe" src=""/>
					</div>
				</div>
    		</div>
    	</div>
    	
    </div>
</div>

<div id="tb" style="text-align: left;">
		<a href="#" class="easyui-linkbutton addBtn" iconCls="glyphicon-plus"
			plain="true" onclick="add()">增加工序</a>
		<a href="#"
			class="easyui-linkbutton updateBtn" iconCls="glyphicon-pencil"
			plain="true" onclick="update()">编辑工序</a> 
		<a href="#"
			class="easyui-linkbutton delBtn" iconCls="glyphicon-remove"
			plain="true" onclick="del()">删除工序</a> 
		</div>

<div id="mm" class="easyui-menu" style="width: 120px;">
	<div onclick="add()" data-options="iconCls:'glyphicon-plus'">添加工序</div>
	<div onclick="treeupdate()" data-options="iconCls:'glyphicon-pencil'">编辑工序</div>
	<div onclick="del()" data-options="iconCls:'glyphicon-remove'">删除工序</div>
	<div class="menu-sep"></div>
	<div onclick="expand()">全部展开</div>
	<div onclick="collapse()">全部收缩</div>
</div>
<script type="text/javascript">
	$(function() {
		loadTree();
		datagrid.datagrid(dgOptions);
	});	
	function collapse() {
		var node = $('#tt').tree('getSelected');
		$('#tt').tree('collapse', node.target);
	}
	function expand() {
		var node = $('#tt').tree('getSelected');
		$('#tt').tree('expand', node.target);
	}	
	/**
	 * 加载树
	 */
	function loadTree() {
		$.post("${ctx}/station/treeData?station_id=${station_id}", function(data) {			
			var treelist = [];
			$.each(data, function(i, item) {
				treelist.push({
					id : item.id,
					text : item.text,
					attributes : item.station_id,
					station:item.station_name,
					parent_id : item.parent,
					iconCls : item.p_icon,					
					state : 'closed'
				});
			});			
			for (var i = 0; i < treelist.length; i++) {
				var children = treelist[i].children || [];
				for (var j = 0; j < treelist.length; j++) {
					if (treelist[j].parent_id == treelist[i].id) {
						children.push(treelist[j]);
					}
				}
				treelist[i].children = children;
			}

			var treeData = [];
			$.each(treelist, function(i, item) {
				if (item.parent_id == 0) {
					treeData.push(item);
				}
			});
			$("#tt").tree({
				data : treeData,
				/* initialState:"collapsed", */
				/* onBeforeSelect: treeBeforeSelect,  */
				onSelect : treeSelect
			});

		});
	}
	/**
	 * 树点击事件
	 */
	function treeSelect(node) {
		
		 var parentAll = node.text;  
         var flag = ">>";  
         parentAll = flag.concat(parentAll);  
         var parent = $('#tt').tree('getParent', node.target);  
         if(parent != null  && parentOne != ''){  
               parentAll = (parent.text).concat(parentAll);  
               var parentOne = $('#tt').tree('getParent', parent.target);  
               if(parentOne != null && parentOne != ''){  
                   parentAll = flag.concat(parentAll);  
                   parentAll = (parentOne.text).concat(parentAll);  
                   var parentTwo = $('#tt').tree('getParent', parentOne.target)  
                   if(parentTwo != null  && parentTwo != ''){  
                       parentAll = flag.concat(parentAll);  
                       parentAll = (parentTwo.text).concat(parentAll);  
                   }  
               }  
         }
         else{
        	 var parentAll = node.text;  
         }
         $("#headtitle").text(parentAll+">>工序清单为："); 
			var param = getTreeParam(node.id);	
			datagrid.datagrid("load", {
			queryParams : param
		})
	}
	var datagrid = $("#dg");

	var dgOptions = {
		rownumbers : true,	
		fit : true,
		border : false,	
		url : '${ctx}/station/listData',
		method : 'post',
		toolbar : '#tb',
		height:420,
		pageSize : 10,
		pagination : true,
		striped:true,
		singleSelect:true,
		queryParams: getInitParam(),
		columns : [ [ {
			field : 'id',
			checkbox : true,
			hidden:true
		}, {
			field : 'text',
			title : '工序名称',
			width : 180
		}, {
			field : 'start_date',
			title : '计划开工时间',
			width : 100,
			align : 'center',
			sortable : true
		}, {
			field : 'end_date',
			title : '计划完工时间',
			width : 100,
			align : 'center',
			sortable : true
		},{
			field : 'p_duration',
			title : '计划工期',
			width : 80,
			align : 'center'			
		},{
			field : 'progress',
			title : '进度',
			align : 'center',
			width : 80
		}, {
			field : 'real_sdate',
			title : '实际开工时间',
			width : 100,
			align : 'center',
			sortable : true
		}, {
			field : 'real_edate',
			title : '实际完工时间',
			width : 100,
			align : 'center',
			sortable : true
		},{
			field : 'r_duration',
			title : '实际工期',
			width : 80,
			align : 'center',
			sortable : true
		}, 
		{
			field : 'station_id',
			title : '所属站点',			
			hidden:true
		},{
			field : 'station_name',
			title : '所属站点',			
			width : 80,
			align : 'center'
		}, {
			field : 'status',
			title : '工序状态',
			width : 80,
			sortable : true,
			align : 'center',
			formatter: function(value, row, index){
         		switch (value) {				
				case 1:
					return '<span style="color:blue">正偏离</span>';
					break;
				case -1:
					return '<span style="color:red">负偏离</span>';
					break;
				default:
					return '<span style="color:green">正常进度</span>';
					break;
				}
 		  	} 
		} ] ],
		onClickRow: function (index, row) { 
			$("#personframe").attr("src", "${ctx}/person?task_id=" + row.id+"&station_id="+row.station_id);
			$("#equipframe").attr("src", "${ctx}/equipment?task_id=" + row.id+"&station_id="+row.station_id); 
			$("#materialframe").attr("src", "${ctx}/material?task_id=" + row.id+"&station_id="+row.station_id); 
			$("#videoframe").attr("src", "${ctx}/video/?task_id=" + row.id+"&station_id="+row.station_id);
		}
	};
	function getInitParam() {
		var param = {"queryParams[station_id]":${station_id}};		
		return param;
	}
	//树菜单筛选
	function getTreeParam(nodeid) {
		var param = {
			parent : nodeid
		};
		return param;
	}
	//增加工序	
	function add() {
		var node = $('#tt').tree('getSelected');
		if(node==null){
			alert("请选择一个树节点！");
			return;
		}
		var param = getTreeParam(node.id);
		top.window.subPage.loadCurrDatagrid = function() {
			showMsg("增加成功！");
			loadTree();
			$("#dg").datagrid("load", {
				queryParams : param
			})			
		}		
		top.openWindow("工序增加", "${ctx}/station/addPage?parent="+node.id+"&station_id="+node.attributes+"&station_name="+node.station,
				{
					size : '600x400'
				});
	}
	//编辑工序-树编辑	
	function treeupdate() {
		var node = $('#tt').tree('getSelected');
		//var param = getTreeParam(node.id);
		top.window.subPage.loadCurrDatagrid = function() {
			showMsg("操作成功！");
			loadTree();
			/* $("#dg").datagrid("load", {
				queryParams : param
			})	 */		
		}		
		top.openWindow("工序修改", "${ctx}/station/updatePage?id="+node.id,
				{
					size : '600x400'
				});
	}
	//编辑工序-列表编辑
	function update() {
		var rowsSel = datagrid.datagrid("getSelections");	
		var param = getTreeParam(rowsSel[0].parent);
		top.window.subPage.loadCurrDatagrid = function() {
			showMsg("增加成功！");
			loadTree();
			datagrid.datagrid("load", {
				queryParams : param
			})			
		}		
		top.openWindow("工序修改", "${ctx}/station/updatePage?id="+rowsSel[0].id,
				{
					size : '600x400'
				});
	}
	//删除工序
	function del() {
		var rowsSel = datagrid.datagrid("getSelections");	
		var param = getTreeParam(rowsSel[0].parent);	
		confirmMsg("确认删除？", function() {
			$.post("${ctx}/station/delete", {
				id : rowsSel[0].id
			}, function(data) {
				showMsg("删除成功！");
				loadTree();
				datagrid.datagrid("load", {
					queryParams : param
				})	
			});
		});
	}
</script>

<#include "/common/dialogWindow.html"/>
<#include "/common/foot.html"/>